<template>
  <div class="profile">
    <!-- 导航条 -->
    <van-nav-bar left-arrow title="编辑资料" @click-left="$router.back()" />

    <!-- 编辑区 -->
    <van-cell-group>
      <van-cell is-link title="头像" center>
        <van-image
          slot="default"
          width="1.5rem"
          height="1.5rem"
          fit="cover"
          round
          :src="user.photo"
          @click="$refs.file.click()"
        />
        <input ref="file" type="file" hidden @change="fileUpload">
      </van-cell>

      <van-cell is-link title="名称" :value="user.name" @click="showNameDialog" />
      <van-cell is-link title="性别" :value="user.gender === 0 ? '男' : '女'" @click="showGender=true" />
      <van-cell is-link title="生日" :value="user.birthday" @click="showDate" />
    </van-cell-group>
    <!-- 修改昵称 -->
    <van-dialog v-model="showName" title="修改昵称" show-cancel-button @confirm="saveName">
      <van-field v-model="userName" placeholder="请输入用户名" />
    </van-dialog>
    <!-- 修改性别 -->
    <van-popup v-model="showGender" position="bottom">
      <van-nav-bar title="修改性别" left-text="取消" @click-left="showGender=false" />
      <van-cell title="男" is-link @click="saveGender(0)" />
      <van-cell title="女" is-link @click="saveGender(1)" />
    </van-popup>
    <!-- 修改生日 -->
    <!-- 修改日期 -->
    <van-popup v-model="showBirthday" position="bottom">
      <!-- v-model 关联的属性 currentDate 是一个日期对象 供展示日期组件默认选中用户生日日期
      min-date 和max -date 都是日期对象 一个是最小的可选时间, 一个是最大的可选时间
      -->
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择生日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="saveBirthday"
        @cancel="showBirthday = false"
      />
    </van-popup>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { reqGetUserProfile, reqUpdateUserInfo, reqUpdatePhoto } from '@/api/user'
export default {
  name: 'UserProfile',
  data() {
    return {
      // 控制弹层
      showName: false,
      showGender: false,
      showBirthday: false,
      // 当前用户的信息
      user: {},
      userName: '', // 单独存储用户名的
      minDate: new Date(1900, 0, 1), // 最小的时间范围 - 日期对象
      maxDate: new Date(), // 最大的时间范围 - 日期对象
      currentDate: new Date() // 默认当前的时间 - 日期对象
    }
  },
  created() {
    this.getUserProfile()
  },
  methods: {
    // 获取个人资料
    async getUserProfile() {
      const { data: { data }} = await reqGetUserProfile()
      // console.log(data)
      this.user = data
    },
    // 显示编辑资料的弹出层
    showNameDialog() {
      this.showName = true
      // 点击弹出框展示后将输入框赋值
      this.userName = this.user.name
    },
    // 提交了昵称修改
    async saveName() {
      // console.log('点击了确认')
      if (this.userName.trim().length === 0 || this.userName.trim().length > 7) {
        return this.$toast.fail('昵称长度不合法')
      }
      try {
        await reqUpdateUserInfo({ name: this.userName })
      } catch {
        return this.$toast.fail('昵称已存在')
      }
      // 更新视图
      this.user.name = this.userName
      // 提示用户
      this.$toast.success('更新成功')
    },
    // 提交性别修改 - 性别修改后返回都是女 接口问题
    async saveGender(gender) {
      // 发送请求携带参数
      await reqUpdateUserInfo({ gender })
      // 更新视图
      this.user.gender = gender
      // 提示用户
      this.$toast.success('修改成功')
      // 关闭弹层
      this.showGender = false
    },
    // 显示生日弹出框
    showDate() {
      this.showBirthday = true
      // 将currentDate 改成  user中birthday字段
      console.log(this.user.birthday)
      // 将this.user.birthday包裹成日期对象
      this.currentDate = new Date(this.user.birthday)
    },
    // 完成生日提交编辑
    async saveBirthday() {
      // console.log(this.currentDate) // 日期对象  传递的数据要求的格式是2019-12-20
      // console.log(dayjs(this.currentDate).format('YYYY-MM-DD')) // 字符串格式的2019-12-20
      const birthday = dayjs(this.currentDate).format('YYYY-MM-DD')
      // 发送请求
      await reqUpdateUserInfo({ birthday })
      // 更新视图
      this.user.birthday = birthday
      // 提示用户
      this.$toast.success('更新成功')
      // 关闭弹层
      this.showBirthday = false
    },
    // 点击图片 触发 file点击事件
    uploadImg() {
      this.$refs.file.click()
    },
    // 纯原生js实现的头像上传
    async fileUpload(e) {
      // loading遮罩
      this.$toast.loading({
        message: '上传中...', // 提示文本
        forbidClick: true, // 禁止背景点击
        overlay: true, // 添加灰色遮罩
        duration: 0 // 设置加载提示组件的展示时长 默认是2s 设置0 不隐藏
      })
      console.log(e.target.files[0]) // 上传文件信息对象  file对象
      // 1. 获取上传文件信息对象  file对象
      const file = e.target.files[0]
      // xxxxx这个位置可以对图片大小 图片类型进行限制
      if (file.size >= 1024 * 30) {
        return	this.$toast.fail('上传文件过大')
      }
      // 2. 创建FromData对象
      const fm = new FormData()
      // 3. 收集上传信息到 fm 中
      fm.append('photo', file)
      // 4. 发送请求
      const { data: { data: { photo }}} = await reqUpdatePhoto(fm)
      console.log(photo)
      // 5. 更新视图
      this.user.photo = photo
      // 6. 提示
      this.$toast.success('上传成功')
      // 7.保证两次上传同一张图片会触发change事件
      e.target.value = ''
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .van-nav-bar__text {
    color: #fff;
  }
}
</style>
